<template>
    <div>
        <el-dialog title="请选择商城用户" :visible.sync="isShow.dialogTableVisible">
            <div class="div_one">
                <p>
                    <span>搜索日期：</span>
                    <el-radio-group v-model="radio" @change="radioFun" size="small">
                        <el-radio-button label="">全部</el-radio-button>
                        <el-radio-button label="today">今天</el-radio-button>
                        <el-radio-button label="yesterday">昨天</el-radio-button>
                        <el-radio-button label="lately7">最近7天</el-radio-button>
                        <el-radio-button label="lately30">最近30天</el-radio-button>
                        <el-radio-button label="month">本月</el-radio-button>
                        <el-radio-button label="year">本年</el-radio-button>
                    </el-radio-group>
                    <el-date-picker
                    style="margin-left:70px;"
                    size="small"
                    v-model="date"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change='dateFun'>
                    </el-date-picker>
                </p>

                <p>
                    <span>用户名称：</span>
                    <el-input size="small" style="width:40%;" v-model="input" placeholder="请输入搜索名称"></el-input>
                    <el-button @click="inpsFun" size="small" type="primary" icon="el-icon-search"></el-button>
                </p>
            </div>
            <el-table v-loading='loading' :data="gridData" size='small'>
                <el-table-column width="50" label="选择" >
                    <template slot-scope="scope">
                        <el-radio @change="radiosFun(scope.row)" v-model="radio1" :label="scope.row.headimgurl">{{ }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column property="uid" label="日期" width="50"></el-table-column>
                <el-table-column property="nickname" label="微信用户名称" width="150"></el-table-column>
                <el-table-column label="客服头像" width="150">
                    <template slot-scope="scope">
                        <img :src="scope.row.headimgurl" style="width:50px;height:50px;" alt="">
                    </template>
                </el-table-column>
                <el-table-column width="50" label="性别">
                    <template slot-scope="scope">
                        <span>{{ scope.row.sex == 0 ? '保密' : (scope.row.sex == 1 ? '男' :'女') }}</span>
                    </template>
                </el-table-column>
                <el-table-column width="100" label="地区">
                    <template slot-scope="scope">
                        <span>{{scope.row.country}}{{scope.row.province}}{{scope.row.city}}</span>
                    </template>
                </el-table-column>
                <el-table-column width="120" label="是否关注公众号">
                    <template slot-scope="scope">
                        <span>{{ scope.row.subscribe == 1 ? '关注' : '未关注' }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @current-change="handleCurrentChange"
                @prev-click="prevFun"
                @next-click='nextFun'
                :current-page="page"
                :page-size="limit"
                layout="total, prev, pager, next, jumper"
                :total="total">
                </el-pagination>
        </el-dialog>
    </div>
</template>

<script>
import {verifierTotal} from '../../api/pickuper/verifier'
export default {
    props:['isShow'],
    data(){
        return {
            gridData:[],
            radio:'',
            radio1:'',
            date:'',
            input:'',
            page:1,
            limit:5,
            total:0,
            loading:true,
            pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
            },
        }
    },
    created(){
        this.listimg();
    },
    methods:{
        //单选框
        radiosFun(val){
            //console.log(this.radio1);
            this.isShow.dialogTableVisible = false;
            this.$emit('imgVal',{imgs:this.radio1,show:this.isShow.dialogTableVisible,id:val.uid})
        },
        //搜索框
        inpsFun(){
            this.loading = true;
            this.listimg()
        },
        //日期搜索
        dateFun(){
            this.loading = true;
            this.listimg()
        },
        radioFun(){
            //console.log(this.radio);
            this.loading = true;
            this.listimg()
        },
        listimg(){
            let shu = '';
            shu = this.date ? this.date : '';
            shu = this.radio ? this.radio : '';
            verifierTotal({page:this.page,limit:this.limit,data:shu,name:this.input}).then(res => {
                if (res.data.status === 200) {
                    console.log(res.data);
                    this.loading = false;
                    this.gridData = res.data.data.list;
                    this.total = res.data.data.count;
                }
            },err => {
                console.log(err);
            })
        },
        handleCurrentChange(val) {
            this.page = val
            this.loading = true;
            this.listimg()
        },
        prevFun(val) {
            this.page = val
            this.loading = true;
            this.listimg()
        },
        nextFun(val) {
            this.page = val
            this.loading = true;
            this.listimg()
        },
    }
}
</script>

<style lang="scss">
    .div_one{
        width: 100%;
        height: 150px;
        background: #f1f1f1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        p{
            width: 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }
    }
</style>